Let's say I have 30 high quality videos on my page and my bandwidth is limited. Once the page is opened, I quickly scroll to the 20th video and I'm trying to watch it. Currently, that video is the only video in my viewport. So right now, I don't want my browser to "load" other videos. Because otherwise it will waste my bandwidth, and it will probably cause buffering issues in the 20th video. (the video I'm trying to watch now)
But If I can somehow stop "loading" the other videos, then browser can use all it's bandwidth in the 20th video, and then I will be able to watch the video without buffering.
To make it clear, I'm not talking about playing/pausing videos, I'm talking about "loading" the playback. I want it to stop if the video is not in viewport.
Is it possible?
use preload attribute in your video tag and set it to none.
<video controls preload="none" poster="video-poster.jpg">
<source src="video-name.webm" type="video/webm">
<source src="video-name.mp4" type="video/mp4">
</video>